<template>
	<view>
		<navigationBar :back_bool="back_bool" title="背景颜色" :btn="btn_bool" btns="确认" @next_step='next_step'></navigationBar>
		
		<view class="" style="display: flex;padding: 20rpx 60rpx;flex-wrap: wrap;" >
			<view :style="{border:index1===index?'2rpx solid #CCCCCC':''}" class="content" v-for="(item,index) in img_list" :key="index" @click="imge(item.color,item.title,index)">
				<image :src="`/static/bg-color/${item.src}.jpg`" class="img" ></image>
				<text>{{item.title}}</text>
			</view>
		</view>
	
	
	
	</view>
</template>

<script>
	import navigationBar from "@/components/navigation-bar/navigation-bar.vue" //导航栏
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters(['by_color'])
		},
		components: {
			navigationBar,
		},
		data() {
			return {
				back_bool:true,
				btn_bool:true,
				border_color:'',
				index1:'00',
				img_list:[
					{
						src:'bg-1',
						title:'天真蓝',
						color:'#b6d6d5'
					},
					{
						src:'bg-2',
						title:'翡翠绿',
						color:'#01aa8d'
					},
					{
						src:'bg-3',
						title:'绿帽子',
						color:'#00fe81'
					},
					{
						src:'bg-4',
						title:'死沉灰',
						color:'#a9b0b8'
					},
					{
						src:'bg-1',
						title:'天真蓝',
						color:'#b6d6d5'
					},
					{
						src:'bg-2',
						title:'翡翠绿',
						color:'#01aa8d'
					},
					{
						src:'bg-3',
						title:'绿帽子',
						color:'#00fe81'
					},
					{
						src:'bg-4',
						title:'死沉灰',
						color:'#a9b0b8'
					},
				]
			}
		},
		methods: {
			...mapMutations(['xg_color']),
			next_step(){
				// console.log(this.titles)
				if(!this.titles){
					uni.showToast({
						title:`请选择背景`,
						icon:"none"
					})
				}else{
					this.xg_color(this.colors)
					uni.showToast({
						title:`背景已设置为${this.titles}`,
						icon:"none"
					})
					setTimeout(()=>{
						uni.switchTab({
							url:"/pages/my"
						})
					},400)
				}
				
				
			},
			imge(color,title,index){
				this.colors=color
				this.titles=title
				// this.border_color="2rpx solid #CCCCCC"
				this.index1=index
				
				// console.log(this.index1)
			}
		}
	}
</script>

<style lang="scss">
.content{
	display: flex;
	flex-direction: column;
	margin: 20rpx 20rpx;
	align-items: center;
	// border: 2rpx solid #CCCCCC;
	border-radius: 15rpx;
	.img{
		width: 260rpx;
		height: 400rpx;
	}
}
</style>
